<template>
    <main role="main">

        <!--默认显示d043ad4bd11373f03bec7761ac0f4bfbfaed0478.jpg-->
        <banner v-bind:boole="true"
                v-bind:path="'68764646asd.jpg'">
        </banner>

        <!--分类导航条-->
        <div class="type">
            <div class="type-wrap w1430">
                <div id="one"
                     v-on:mouseleave="hideCategoryOne()"
                     v-on:mouseenter="showCategoryOne()"
                     class="one warp">
                    <span class="name">方向：</span>
                    <ul class="items clearfix">
                        <li class="cur">
                            <a href="javascript:void(0);"
                               v-on:click="level3Show()">
                                全部
                            </a>
                        </li>
                        <li v-for="c1 in level1"
                            v-bind:id="c1.id"
                            class="">
                            <a href="javascript:void(0);"
                               v-on:click="level1Show(c1)">
                                {{c1.name}}
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="two"
                     v-on:mouseleave="hideCategoryTwo()"
                     v-on:mouseenter="showCategoryTwo()"
                     class="two warp">
                    <span class="name">分类：</span>
                    <ul class="items clearfix">
                        <li class="cur">
                            <a href="javascript:void(0);"
                               v-on:click="level3Show()">
                                不限
                            </a>
                        </li>
                        <li v-for="c2 in level2"
                            v-bind:id="c2.id"
                            class="">
                            <a href="javascript:void(0);"
                               v-on:click="level2Show(c2)">
                                {{c2.name}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--课程内容-->
        <div class="container">

            <the-course v-bind:on-line="''"
                        v-bind:new-courses="allCourses">
            </the-course>
            <!--pagination可选参数：v-bind:itemCount="8" 不设置默认显示5个按钮，设置最多显示8个按钮-->
            <pagination ref="pagination" v-bind:list="selectCourses"></pagination>
        </div>

    </main>
</template>

<script>
    import TheCourse from "../components/theCourses";
    import Pagination from "../components/pagination";
    import Banner from "../components/banner";
    export default {
        name: 'allCourse',
        components: {Banner, Pagination, TheCourse},
        data: function () {
            return {
                allCourses: [],
                oneHeight: "",
                twoHeight: "",
                categorys: [],
                level1: [],
                level2: [],
                level3: [],
                level1Boole: false,
                level2Boole: false,
                selectCondition: "",
            }
        },
        mounted: function () {
            let _this = this;
            _this.$refs.pagination.size = 3;
            _this.clickSelectCourses(null);
            _this.getAllCategory();
            _this.hideCategoryTwo();
            _this.hideCategoryOne();
            _this.level3Show();
        },
        methods: {

            /**
             * 根据用户选择的分类查询课程
             * */
            clickSelectCourses: function (id) {
                let _this = this;
                _this.selectCondition = id;
                setTimeout(function () {
                    _this.selectCourses(1);
                },200);
            },

            selectCourses: function (page) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/album/course/select/courses",{
                    page: page,
                    size: _this.$refs.pagination.size,
                    categoryId: _this.selectCondition,
                }).then((response)=>{
                    let resp = response.data;
                    _this.allCourses = resp.content.list;
                    _this.$refs.pagination.render(page, resp.content.total);

                }).catch((response)=>{
                    console.log("error：", response);
                });
            },


            /**
             * 获取报名数最多的课程
             */
            getAllCourses: function(page) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/album/course/all/courses",{
                    page: page,
                    size: _this.$refs.pagination.size,
                }).then((response)=>{
                    let resp = response.data;
                    _this.allCourses = resp.content.list;
                    _this.$refs.pagination.render(page, resp.content.total);

                }).catch((response)=>{
                    console.log("error：", response);
                });
            },

            showCategoryTwo: function () {
                let _this = this;

                // let liOuterHeight = $("#two ul li").outerHeight(true);
                // let liOuterWidth = $("#two ul li").outerWidth(true);
                // let divWidth = $("#two").width();
                //每个li的总高度，总宽度和div宽度
                // console.log("总高度，总宽度,div宽度", liOuterHeight, liOuterWidth,divWidth);
                //展示每个li的height高度
                //console.log($("#two li").css("height"));
                //展示每个li的margin-bottom的宽度
                //console.log($("#two li").css("margin-bottom"));

                let height = _this.twoHeight;
                //1rem=16px，转换为rem单位。
                let height_rem = height/16;

                height_rem = height_rem + "rem";

                $("#two").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height:"+height_rem+";");
            },

            hideCategoryTwo: function () {
                let _this = this;
                if (_this.level2Boole == true) {
                    return;
                }
                $("#two").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height: auto;");
                _this.twoHeight = $("#two").height();
                function interval(twoHeight) {
                    let i = twoHeight;
                    let int;
                    int = setInterval(function () {
                        i = i - 2;
                        let rem = i/16;
                        $("#two").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height: "+rem+"rem;");
                        if (i <= 60) {
                            clearInterval(int);
                        }
                    },3);
                }
                $("#two").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height: 3.75rem;");
            },

            showCategoryOne: function () {
                let _this = this;

                // let liOuterHeight = $("#two ul li").outerHeight(true);
                // let liOuterWidth = $("#two ul li").outerWidth(true);
                // let divWidth = $("#two").width();
                //每个li的总高度，总宽度和div宽度
                // console.log("总高度，总宽度,div宽度", liOuterHeight, liOuterWidth,divWidth);
                //展示每个li的height高度
                //console.log($("#two li").css("height"));
                //展示每个li的margin-bottom的宽度
                //console.log($("#two li").css("margin-bottom"));

                let height = _this.oneHeight;
                //1rem=16px，转换为rem单位。
                let height_rem = height/16;

                height_rem = height_rem + "rem";

                $("#one").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height:"+height_rem+";");
            },

            hideCategoryOne: function () {
                let _this = this;
                if (_this.level1Boole == true) {
                    return;
                }
                $("#one").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height: auto;");
                _this.oneHeight = $("#one").height();
                $("#one").attr("style", "box-shadow: rgba(95, 101, 105, 0) 0px 12px 20px 0px; height: 3.75rem;");
            },

            /**
             * 分类列表查询
             */
            getAllCategory: function () {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/album/category/all').then((response)=>{
                    let resp = response.data;
                    _this.categorys = resp.content;

                    // 将所有记录格式化成树形结构
                    _this.level1 = [];
                    for (let i = 0; i < _this.categorys.length; i++) {
                        let c = _this.categorys[i];
                        if (c.parent === '00000000') {
                            for (let j = 0; j < _this.categorys.length; j++) {
                                let child = _this.categorys[j];
                                if (child.parent === c.id) {
                                    if (Tool.isEmpty(c.children)) {
                                        c.children = [];
                                    }
                                    c.children.push(child);
                                    _this.level3.push(child);
                                }
                            }
                            _this.level1.push(c);
                        }
                    }
                })

            },

            level1Show: function (c1) {
                let _this = this;
                _this.level1Boole = true;
                $("#" + c1.id).siblings().removeClass("cur");
                $("#" + c1.id).addClass("cur");
                _this.level2 = c1.children;
                $("#two ul li:first-child").siblings().removeClass("cur");
                $("#two ul li:first-child").addClass("cur");
                _this.clickSelectCourses(c1.id);
            },

            level2Show: function (c2) {
                let _this = this;
                _this.level2Boole = true;
                _this.showCategoryOne();
                _this.showCategoryTwo();
                $("#" + c2.id).siblings().removeClass("cur");
                $("#" + c2.id).addClass("cur");
                $("#" + c2.parent).siblings().removeClass("cur");
                $("#" + c2.parent).addClass("cur");
                _this.level1Boole = true;
                _this.clickSelectCourses(c2.id);
            },

            level3Show: function () {
                let _this = this;
                $("#one ul li:first-child").siblings().removeClass("cur");
                $("#two ul li:first-child").siblings().removeClass("cur");
                $("#one ul li:first-child").addClass("cur");
                $("#two ul li:first-child").addClass("cur");
                _this.level2 =_this.level3;
                _this.level1Boole = false;
                _this.level2Boole = false;
                _this.hideCategoryOne();
                _this.hideCategoryTwo();
                _this.clickSelectCourses(null);
            },
        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .type {
        position: relative;
        background-color: #fff;
        padding-bottom: 1.7rem;
        margin: 0;
        margin-bottom: 1rem;
        padding: 0;
    }

    .type .type-wrap {
        position: relative;
        padding-top: 20px;
        height: auto;
    }

    .w1430 {
        width: 1140px;
        margin: 0 auto;
    }

    .type .type-wrap .warp {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        position: relative;
        width: 1140px;
        height: 54px;
        overflow: hidden;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 12px 20px 0 rgba(95,101,105,0);
        border-radius: 8px;
        transition: all .2s;
    }

    .type .type-wrap .warp .name {
        color: #07111b;
        font-weight: 700;
        display: block;
        line-height: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 6px;
    }

    .type .type-wrap .warp ul{
        padding: 0;
    }

    .clearfix::after {
        content: '\0020';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .type .type-wrap .warp .items {
        width: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }

    .type .type-wrap .warp .items li.cur {
        background-color: rgba(247, 144, 12, 0.6);
    }

    .type .type-wrap .warp .items li {
        float: left;
        border-radius: 6px;
        /*margin: 0.375rem 0.375rem 0.375rem 0.375rem;*/
    }

    .type .type-wrap .warp .items li a{
        display: block;
        line-height: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 6px;
    }

    ol, ul {
        list-style: none;
    }

    .type .type-wrap .warp.two {
        /*top: 4rem;*/
        /*z-index: 2;*/
        /*border: solid 2px #0B61A4;*/
    }

    a:hover{
        text-decoration:none
    }
</style>
